<template>
	<!-- 工作台 -->
	<view style="padding: 20rpx 20rpx 0 0;">
		<!-- <view :style="{'height':safeTop + 'px'}"></view> --> 
		<view class="tiaopei2" style="color: #fff;  "> 
			<view class="item" v-for="(item,index) in arr.list" :key="index" >	 
				<div class="flex topTil">
					<view v-if="index == 0" class="tx-text">前调：挥发性较强，最先闻到的香味<br />建议总比例45%以下，前调当前总比例:{{totalStaff[index].toFixed(2)}}%</view>
					<view v-if="index == 1" class="tx-text">中调：核心部分，将香味温和化<br />建议总比例30%-40%，中调当前总比例:{{totalStaff[index].toFixed(2)}}%</view>
					<view v-if="index == 2" class="tx-text">尾调：挥发性较弱，定香作用，是整体的灵魂<br />建议总比例25%以上，尾调当前总比例:{{totalStaff[index].toFixed(2)}}%</view> 
					
					<view > 
					 	<span v-if="arr.list[index].length<=2"  @click="addLine(index)" style="color: #a3a4a8; font-size: 24px; margin: 0 10px;">+</span>
					 	<span v-if="arr.list[index].length>=3"  @click="delLine(index)" style="color: #a3a4a8; font-size: 24px;  margin: 0 15px;">-</span>  
					</view> 
				</div>
				<view class="item2"  v-for="(item1,index1) in arr.list[index]" :key="index+index1">
						<view class="l">
							<image :src="item1.image" style="width: 60rpx;height: 60rpx;" mode=""></image>
						</view>
						<view class="m">
							<view style="text-align: center;">
								{{ item1.name }}
							</view>
							<view style="text-align: center; font-size: 20rpx;">
								{{ percentages[index][index1] }}%
							</view>
							
						</view>
						<view class="m2"> 
							<slider :value="item1.rate" max="100" @changing="handleInput(index,index1, $event)"  step="1" 
								@change="slideEnd(index,index1,$event)"
								:block-size="item1.blsize"
								activeColor="#fff" 
								blockColor="#c49c4c"
								backgroundColor="#333" 
								:disabled="asdd" 
							 />
						</view>
						<view class="r" @tap="editcolor(index,index1)">
							<image :src="imgHost + '/statics/assets/a_07.jpg'"   style="width: 30rpx;" mode="widthFix"></image>
						</view> 
				</view>  
			</view>
			
			<view class="maska" v-if="mask" @touchmove="hidemask" @touchcancel="hidemask" @touchend="hidemask" @tap="hidemask" @click="hidemask"></view>
		</view>
		
	 
		
		<view class="tiaopei3" @click="reset"> 
			<image :src="imgHost + '/statics/assets/a_40.jpg'"  style="width: 50rpx;height: 50rpx;" mode=""></image>重新调配
		</view>
			
		<view class="footer">
			<view class="t1">
				您的专属权益
			</view>
			<view class="t2">
				区块专属加密味道哈希值 <br>
				<text>(其它人仅可通过输入您的哈希值调配和您重复的味道)</text>
			</view>
			<view class="t3">
				<view class="btn" @click="saveLocal()">
					保存返回
				</view>
				<view class="btn btnr" @click="submit">
					完成调配
				</view>
			</view>
		</view>
		<!-- :show="show" -->
		<uni-popup  @close="close" ref="popup" :round="10" closeable @open="open">
		    <view class="shouquan">
				<view class="top">
					选择香料 
					<uni-icons type="closeempty" class="closeempty" @click="close" size="30"></uni-icons>
				</view> 
				<view class="mid">
					<view class="midt">  
						 <u-tabs
						 :list="list1"
						 lineColor="#fff" 
						 :activeStyle='{
						 	color:"#fff"
						 }' 
						:current="tabIndex" 
						 @click="setCategory"
						  @change="setCategory"
						 ></u-tabs>  
					</view> 
					<!-- @touchstart.stop.native="touchstart" @touchend.stop.native="touchend" @touchmove.stop.native="touchmove" -->
					<!-- @change="onSwiperChange" -->
					<swiper 
					    :current="tabIndex"  
					    :duration="300"
						style="width: 100%; height: 200px;"
						@change="onSwiperChange"
					  >
					    <swiper-item v-for="(i, jndex) in list1" :key="jndex"  class="midb" > 
					      <view :class="ac == index?'item on':'item'" @click.stop="setStaff(index,item)" v-for="(item,index) in staff.list"> 
					      	<view class="t">
					      		<image :src="item.image" style="width: 240rpx;" mode="widthFix"></image>
					      	</view>
					      	<view class="b">
					      		{{item.name}} <image   :src="imgHost + '/statics/assets/rightg.png'"  style="width: 12rpx;height: 24rpx;" mode=""></image>
					      	</view>
					      </view> 
					    </swiper-item>
					</swiper>
					  
					<!-- <scroll-view :scroll-top="scrolltop" @scrolltolower="loadMore" scroll-y="true" height="200" class="midb"  >
						<view :class="ac == index?'item on':'item'" @click.stop="setStaff(index,item)" v-for="(item,index) in staff.list">
							<view class="t">
								<image :src="item.image" style="width: 240rpx;" mode="widthFix"></image>
							</view>
							<view class="b">
								{{item.name}} <image   :src="imgHost + '/statics/assets/rightg.png'"  style="width: 12rpx;height: 24rpx;" mode=""></image>
							</view>
						</view> 
					</scroll-view> -->
					
				</view>
				<view class="mid2">
					下方筛选适合前/中/尾调的香料
				</view>
				<view class="mid3">
					<view :class="select.position === ''?'item on':'item'" @click="setPosition('')">
						全部
					</view>
					<view :class="select.position === 0?'item on':'item'" @click="setPosition(0)">
						前调
					</view>
					<view :class="select.position == 1?'item on':'item'" @click="setPosition(1)">
						中调
					</view>
					<view :class="select.position == 2?'item on':'item'" @click="setPosition(2)">
						尾调
					</view>
				</view>
				<view class="tcbot">
					<view class="l">
						<view class="t1" v-if="ac1 === ''">
							当前：全部 
						</view>
						<view class="t1" v-if="ac1 === 0">
							当前：前调
						</view>
						<view class="t1" v-if="ac1 === 1">
							当前：中调
						</view>
						<view class="t1" v-if="ac1 === 2">
							当前：尾调 
						</view>
						<view class="t2">
							您可以选择对应推荐的香调
						</view>
					</view>
					<view class="r" @click="finish">
						选择 <image  :src="imgHost + '/statics/assets/a_48.jpg'"  style="width: 25rpx;" mode="widthFix"></image>
					</view>
				</view>
		    </view>
		</uni-popup> 
		<!-- <uni-popup :show="loading">
			<view class="loading">
				<image  :src="imgHost + '/statics/assets/a2.gif'"  mode="widthFix"></image>
			</view>
		</uni-popup> -->
		
		<u-modal :show="confrimShow" mode="center" class="pianWrapper" :showCancelButton='true'  @cancel="confrimShow=false"  :footer='null' @confirm='confrimGo'>
			<view class="pianCon">
				<view class="til" style="padding: 20rpx 0;">保存成功，是否返回首页？</view>  
			</view>
		 </u-modal>
		 
	</view>
</template>
<script> 
 
	
import {getList,getRand} from '@/api/spice' 
import {HTTP_REQUEST_URL} from '@/config/app';
	
import {save} from '@/api/hash'
import {loadConfig } from '@/api/api'
 import Cache from '@/utils/cache';
 
export default {
	data() {
		return {
			imgHost : '', 
			loading:false,
			ddddd:10,
			arr:{list : [{},{},{}],list2:[]},
			scrolltop:0,
			config:{},
			category:{},
			list1:{},
			staff:{list : []},
			select:{staff : {},position : 0,index:0},
			form:[{},{},{}],
			totalStaff:[0,0,0],
			defaultStaff:[], 
			position:'',
			startX:0,
			startY:0,
			endY:0,
			ac:0,
			ac1:0,
			tabIndex:0,
			id:0,
			page:1,
			show:false,
			max:100,
			
			asdd:false,
			mask:false,
		    list:['授权一次', '永久授权'],
			jindu:100,
			blsize:20,
			confrimShow:false
			
		};
	},
	onLoad(options) {
		this.imgHost = HTTP_REQUEST_URL;
		this.id = options.id || 0;
	
		this.getSpice();
		// loadConfig().then(res =>{
		//   this.config = res.data;
			
		// }).catch(e =>{
			
		// })
	},
	computed:{
		total(){
			let totals = 0;
			for(let group in this.arr.list){ 
				  for (let key in this.arr.list[group]) {
					  totals += this.arr.list[group][key].rate;
					 
				  }
			} 
			return totals;
		},
		percentages(){
			let result = [];
			for(let group in this.arr.list){
			  result[group] = []; 
			  for (let key in this.arr.list[group]) {
				result[group][key] = this.total > 0 ? ((this.arr.list[group][key].rate / this.total) * 100).toFixed(2) : 0;
				 this.arr.list[group][key].value = result[group][key]; 
			  } 	
			} 
			return result;
		}
	 
	},
	methods:{
		onSwiperChange(e) {
		  this.tabIndex = e.detail.current;
		},
		handleTabChange(index) {
		  this.tabIndex = index;
		},
		addLine(index){ // 增加行
			let arr2 = this.arr.list[index]; 
			getRand({'id':[arr2[0].id,arr2[1].id].join(','),position:index}).then(res =>{
				let item = res.data;
				this.arr.list[index].push({
					...item
				})
			}).catch(e =>{
				uni.$u.toast(e.msg);
			})
			
			
		},
		delLine(index){
			this.arr.list[index].splice(this.arr.list[index]?.length-1,1)
		},
		touchstart(e) {
			this.startX = e.touches[0].clientX;
			this.startY = e.touches[0].clientY; 
		},
		loadMore(){
			this.page ++;
			getList({'position':this.select.position,'category':this.category[this.tabIndex].id,'page':this.page}).then(res =>{
				if ( this.staff.list.length == 0 ){ 
					this.staff.list = res.data.category[this.tabIndex].spice;
				}else{
					this.staff.list =this.staff.list.concat(res.data.category[this.tabIndex].spice); 
				}
				
				//Cache.set("category_"+e.index+'_'+category[tabIndex.value].id,res.data.category[e.index].staff);
			}).catch(err =>{
				console.log(err);
			});

		},
		touchend(e){  
			 let left = this.startX - e.changedTouches[0].clientX;
			 let up = Math.abs(e.changedTouches[0].clientY); 
			 if ( left > 50 && up < 50 && left != 0 ){
				 if ( this.tabIndex < this.list1.length-1 ){
					this.tabIndex ++;
					this.setCategory({'index':this.tabIndex})
				 }
			 }else{
				 if ( left < 0 && left < -50 ){
					  if (this.tabIndex > 0){
						  this.tabIndex --;
						 this.setCategory({'index':this.tabIndex})
					  }
				 }
				 
				 
			 } 
		},
		getSpice(){ 
			getList({'position':this.select.position,'id':this.id}).then(res =>{
				let nList1 = [];  
				let saved = uni.getStorageSync('staff')
				if ( saved){
					this.arr.list = saved.list;
					
				}else{
					this.arr.list = res.data.index;
				}
				
				this.arr.list2 = res.data.index;
				this.category = res.data.category;
				// for(var i in this.category){
				// 	this.list1.push({name:this.category[i].name});
				// }
				this.list1 = this.category.map(item=>{
					return{
						name:item.name
					}
				})
				this.staff.list = this.category[0].spice;
				this.select.staff = this.staff.list[0];
				uni.setStorageSync('defaultStaff',this.arr.list2);
				this.computTotal();
			}).catch(err =>{
				
			});
		},
		sectionChange(index) { 
		  this.curNow = index;  
		},  
		setCategory(e){
			this.tabIndex = e.index;
			this.page = 1;
			this.staff.list  = [];
			getList({'position':this.select.position,'category':this.category[e.index].id}).then(res =>{ 
				this.staff.list = res.data.category[e.index].spice;
				Cache.set("category_"+e.index+'_'+category[e.index].id,res.data.category[e.index].spice);
			}).catch(err =>{
				
			}); 
		},
		 submit(){
			//loading.value = true; 
			
			save({"data":this.arr.list,"id":this.id}).then( res =>{
				this.loading = false;
				uni.removeStorageSync('staff');
				this.$util.JumpPath('/pages/tiaoxiang/confirm?id=' + res.data.id);
			}).catch(e => {
				uni.showModal({
					icon:'none',
					showCancel:false,
					content : e.msg
				})
				this.loading = false;
			})
		},
		 saveLocal(){
			uni.setStorageSync('staff',this.arr);
			
			this.confrimShow = true
			// uni.showModal({
			// 	content:'保存成功，是否返回首页？',
			// 	success: (res) => {
			// 		if ( res.confirm ){
			// 			goto('myindex/myindex')
			// 		}
			// 	}
			// })
		}, 
		slideEnd (position,index, event){
			this.arr.list[position][index].blsize = 20;
		}, 
		computTotal(){
			 this.totalStaff = [0,0,0];
			 for(let i in this.percentages){
				 for(var j in this.percentages[i]){
				 	this.totalStaff[i] += parseFloat(this.percentages[i][j]);
					}
			}	 
		}, 
		handleInput(position,index, event){
			this.arr.list[position][index].rate = (event.detail.value) ;
			this.arr.list[position][index].blsize = 30;
			this.computTotal();
			
		},
		 hidemask(){ 
			this.asdd = false;
			this.mask = false; 
		},
		reset() { 
			this.getSpice();
			uni.removeStorageSync('staff');
			
		   // window.location.reload();
		} ,
		// 定义方法  
		  open() {  
		  // 打开逻辑，比如设置 show 为 true  
		  // this.show = true;  
		    this.$refs.popup.open('top')
		},
		goto(page){
		  uni.navigateTo({
		  	url:'/pages/' + page
		  })  
		},
		setStaff(e,item) {
		  // 打开逻辑，比如设置 show 为 true  
		  this.ac = e;  
		  this.select.staff = item;
		}, 
		setPosition(e) {
		  // 打开逻辑，比如设置 show 为 true  
		  this.staff.list = [];
		  this.page = 1;
		  //ac1.value = e;  
		  this.select.position = e;
		  getList({'position':e,'category':this.category[this.tabIndex].id,page:this.page}).then(res =>{
		  	this.category = res.data.category;
		  	let data = this.category[this.select.index].spice;
			console.log(data);
			this.staff.list = data;
		  }).catch(err =>{
		  	console.log(err);
		  });
		  	
		},
		editcolor(index,index1){
			let that = this; 
			this.$refs.popup.open('bottom')
			 this.select.position = '';
			 this.select.op = index;
			 this.staff.list = [];
			 this.page = 0;
			 this.select.index = index1;
			 this.ac1 = index;
			this.loadMore()
			
		},close() {  
		  // 关闭逻辑，设置 show 为 false  
		  // this.show = false;  
		  // console.log('close');  
		  this.$refs.popup.close()
		},
		finish(){
			console.log('org',this.arr.list[this.select.op]);
			this.staff.list = this.category[0].spice;
			this.show = false; 
			this.$refs.popup.close()
			
			 let value = this.arr.list[this.select.op][this.select.index];
			 let rate = this.arr.list[this.select.op][this.select.index].rate;
			 this.select.staff.rate = 50;
			this.arr.list[this.select.op][this.select.index] = this.select.staff
			console.log('now',this.arr.list[this.select.op]);
			
			this.computTotal();
		} ,
		confrimGo(){
			// 
			this.goto('pages/tiaoxiang/index')
		}
		
	}
} 
		
		
</script>

<style lang="scss">
	page{
		background-color: #151515; 
		padding: 30rpx 30rpx;
		width: 100%;
		box-sizing: border-box;
		padding-bottom: 300rpx;
	}

	.haxi1{
		color: #fff;
		font-size: 44rpx;
		margin-bottom: 80rpx;
		text-align: center;
	}
	.loading{
		width: 500rpx;
		margin:0 auto;
		
		image{
			margin-top: 100%;
			width: 100%;
		}
	}
	.total{
		color:#FFF;
		text-align: center;
		padding: 20rpx;
		font-size: 25rpx;
	
	}
	.tiaopei1{
		display: flex;
		color: #fff;
		align-items: center;
		padding-right: 35rpx;
		margin-bottom: 80rpx;
		justify-content: flex-start;
		.l{
			min-width: 200rpx;
			font-size: 28rpx;
		}
		.r{
			flex: 1;
			.jindu{
				height: 20rpx;
				background-color: #fff;
				border-radius: 10rpx;
				transition: all .3s;
			}
		}
	}
	.topTil{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px 0;
	}
	.tiaopei2{ 
		padding-bottom: 0rpx;
		margin-bottom: 30rpx;
		position: relative; 
		.maska{
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background-color: transparent;
			z-index: 3;
		}
		.tx-text{
			text-align:left;
			color: #FFF; 
			font-size: 25rpx; 
			// width:80%;
			// margin: 20rpx auto;
			line-height: 40rpx;
		}
		.item{
			
			color: #fff;
			margin-bottom: 30rpx;
			.item2{
				display: flex;
				text-align:center;
			}
			.l{
				border-radius: 50%;
				overflow: hidden;
				width: 60rpx;
				height: 60rpx;
				margin-right: 30rpx;
			}
			.m{
				font-size: 28rpx;
				width: 100rpx;
				
			}
			.m2{
				flex: 1;
				margin-right: 20rpx;
			}
			.r{
				padding-right: 20rpx;
			}
		}
		.item{
			margin-bottom: 30rpx;
			padding-bottom: 30rpx;
			border-bottom: 1px solid #333;
		}
	}
	.uni-scroll-view-content{
		display: flex;
		flex-wrap: wrap;
	}
	.tiaopei3{
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		color: #999;
		margin-bottom: 30rpx;
		image{
			margin-right: 20rpx;
		}
	}
	.footer{
		background-color: #333;
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		padding: 30rpx;
		color: #e9daa1;
		.t1{
			font-size: 28rpx;
			margin-bottom: 15rpx;
		}
		.t2{
			font-size: 24rpx;
			margin-bottom: 20rpx;
			line-height: 1.5;
			text{
				color: #999;
			}
		}
		.t3{
			display: flex;
			justify-content: space-between;
			.btn{
				width: 330rpx;
				border: 1px solid #999;
				border-radius: 10rpx;
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				font-size: 28rpx;
			}
			.btnr{
				background-color: #999;
			}
		}
	}
	.shouquan{
		background-color: #151515;
		padding: 50rpx;
		padding-bottom: 150rpx;
		position: relative;
		.top{
			font-size: 32rpx;
			color: #fff;
			margin-bottom: 40rpx;
			text-align: center;
			.closeempty{
				position: absolute;
				top:20rpx;
				right: 20rpx;
			}
		}
		.mid{
			touch-action: none;
			.midt{
				
			}
			.scroll{
				display: flex;
				
				
				margin-bottom: 30rpx;
			}
			.midb{
				display: block;
				
				padding: 30rpx 0;
				height: 450rpx;
				overflow-y: auto;
				margin-bottom: 30rpx;
				.item{
					float: left;
					
					margin-bottom: 30rpx;
					margin-left: 10rpx;
					.t{
						border-radius: 10rpx;
						overflow: hidden;
						width: 205rpx;
						height: 100rpx;
						margin-bottom: 15rpx;
					}
					.b{
						color: #999;
						font-size: 24rpx;
						display: flex;
						align-items: center;
						image{
							margin-left: 10rpx;
						}
					}
				}
				.on{
					.t{
						border: 4rpx solid #fff;
					}
					.b{
						color: #fff;
					}
				}
			}
		}
		.mid2{
			text-align: center;
			color: #a1a2a6;
			font-size: 28rpx;
			margin-bottom: 50rpx;
		}
		.mid3{
			display: flex;
			color: #fff;
			font-size: 28rpx;
			margin-bottom: 30rpx;
			.item{
				flex: 1;
				text-align: center;
				border-right: 1px solid #444;
				height: 70rpx;
				line-height: 70rpx;
				transition: all 0.8s; 
			}
			.on{
				background-color: #333;
				transition: all 0.8s; 
			}
			.item:last-child{
				border: none;
			}
		}
		.tcbot{
			background-color: #25262a;
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			display: flex;
			align-items: center;
			padding: 30rpx;
			.l{
				flex: 1;
				.t1{
					font-size: 30rpx;
					color: #fff;
					margin-bottom: 15rpx;
					image{
						position: relative;
						top: -10rpx;
						left: 5rpx;
					}
				}
				.t2{
					font-size: 24rpx;
					color: #999;
				}
			}
			.r{
				width: 150rpx;
				height: 70rpx;
				background-color: #444;
				border-radius: 10rpx;
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				image{
					margin-left: 20rpx;
				}
			}
		}
		
	}
	
</style>
